<template>
  <div>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="status" :class="{ yet: item.status == 1 }">
          {{ item.status == 0 ? "已达标" : "待完成" }} {{item.status }}
        </view>

        <u-cell-item
          :arrow="false"
          hover-class="none"
          :border-bottom="false"
          class="title"
          title="考核交易类型："
          :value="item.name"
        />
        <u-cell-item
          :arrow="false"
          hover-class="none"
          :border-bottom="false"
          title="考核金额："
          :value="item.num"
        />
        <u-cell-item
          :arrow="false"
          hover-class="none"
          :border-bottom="false"
          title="当前交易金额："
          :value="item.num"
        />
        <u-cell-item
          :arrow="false"
          hover-class="none"
          :border-bottom="false"
          title="考核开始时间："
          :value="item.time"
        />
        <u-cell-item
          :arrow="false"
          hover-class="none"
          :border-bottom="false"
          title="考核结束时间："
          :value="item.time"
        />
      </view>
    </view>

    <uni-load-more :status="loadMore"></uni-load-more>
  </div>
</template>

<script>
import loadMoreData from "@/mixins/loadmore";
import mockjs from "mockjs";
export default {
  mixins: [loadMoreData],
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.list = this.list.concat(
      mockjs.mock({
        "list|10-15": [
          {
            name: "@cname",
            agentName: "@cname",
            brandName: "红色押金版",
            num: "123",
            time: "2020-08-20",
            "status|0-1": "1",
          },
        ],
      }).list
    );
    this.getList();
  },
  methods: {
    getList() {
      //   let params = {
      //     pageNum: this.pageNum,
      //     pageSize: this.pageSize,
      //     ...this.query,
      //   };
      //   listPage(params).then((res) => {
      var list = mockjs.mock({
        "list|10": [
          {
            name: "@cname",
            agentName: "@cname",
            num: "123",
            brandName: "红色押金版",
            time: "2020-08-20",
            "status|0-1": "1",
          },
        ],
      }).list;
      //   console.log(list)
      this.loadMoreStatusDeal(list);
      if (list.length > 0) {
        this.list = this.list.concat(list);
      }
      //   });
    },
    reachBottomCallBack() {
      this.getList();
    },
  },
};
</script>
<style scoped lang='scss'>
.item {
  margin: R(25) R(25);
  padding: R(14) R(28) R(24);
  background: #fff;
  border-radius: R(10);
  position: relative;
  .status {
    position: absolute;
    top: 0;
    right: 0;
    width: R(141);
    height: R(61);
    line-height: R(61);
    background: #4dbd6a;
    border-radius: R(57) R(10) R(4) R(4);
    text-align: center;
    font-size: R(24);
    font-weight: 400;
    color: #ffffff;
  }
  .yet {
    background: #fc8468 !important;
  }
  .title {
    font-size: R(30);
    font-weight: bold;
    color: #1a1a1a;
    /deep/.u-cell__value {
      color: #1a1a1a;
    }
  }
  /deep/.u-cell {
    padding: R(4) R(10);
    .u-cell__value {
      text-align: left;
    }
  }
}
</style>